<template>
  <div id="cooling-monitoring">
    <!--        <div id="cont" style="color: #fff;font-size: 24px"></div>-->
    <div class="monitor-h">
      <Row class="header-h col-fff">
        <i-col span="24">
          <div id="monitorBtn">
            <m-tabs :btnText="btncharacter" @changeBtn="toggleComponent" :activeDateBtn="activeName"
            ></m-tabs>
          </div>
        </i-col>
      </Row>
    </div>
    <div class="monitor-m">
      <Row :gutter="10" class="air-pressure" v-show="activeIndex === 0">
        <i-col span="24">
          <div class="main-l" id="main-l" style="width: 100%">
            <div class="lines">
              <line-tip :pipeColor1="'line-color2'" :pipeColor2="'line-color1'"
                        :text-color2="{color: 'rgba(119, 224, 253, 1)'}"
                        :text-color1="{color: 'rgba(122, 173, 255, 1)'}" :pipeText='pipeText'></line-tip>
            </div>
            <div class="base-select">
              <line-tip :pipeColor1="'line-color3'" :pipeColor2="'line-color4'"
                        :text-color1="{color: 'rgba(166,141,255,1)'}" :text-color2="{color: 'rgba(104,162,255,1)'}"
                        :pipeText='pipeText1'></line-tip>
            </div>
              <div id="quneeWrapper"></div>
          </div>
        </i-col>
        <!--        <i-col span="4">-->
        <!--          <div class="main-r">-->
        <!--            <div class="fieldset">-->
        <!--              <div class="field-title one-field">{{environmentTitle}}</div>-->
        <!--              <div class="field-list">-->
        <!--                <ul class="fieldtable-list">-->
        <!--                  <li v-for="(item,index) in environment" :key="index">-->
        <!--                    <div style="height: 44px">-->
        <!--                      <p>{{item.value}}</p>-->
        <!--                      <p>{{item.dataType}} <span>({{item.unit}})</span></p>-->
        <!--                    </div>-->
        <!--                  </li>-->
        <!--                </ul>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="fieldset">-->
        <!--              <div class="field-title tow-field">{{freezeTitle}}</div>-->
        <!--              <div class="field-list">-->
        <!--                <ul class="fieldtable-list">-->
        <!--                  <li v-for="(item,index) in freeze" :key="index">-->
        <!--                    <div style="height: 44px">-->
        <!--                      <p>{{item.value}}</p>-->
        <!--                      <p>{{item.dataType}} <span>({{item.unit}})</span></p>-->
        <!--                    </div>-->
        <!--                  </li>-->
        <!--                </ul>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--            <div class="fieldset">-->
        <!--              <div class="field-title three-field">{{coolingTitle}}</div>-->
        <!--              <div class="field-list">-->
        <!--                <ul class="fieldtable-list">-->
        <!--                  <li v-for="(item,index) in cooling" :key="index">-->
        <!--                    <div style="height: 44px">-->
        <!--                      <p>{{item.value}}</p>-->
        <!--                      <p>{{item.dataType}} <span>({{item.unit}})</span></p>-->
        <!--                    </div>-->
        <!--                  </li>-->
        <!--                </ul>-->
        <!--              </div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </i-col>-->
      </Row>
      <div class="use-gas" v-show="activeIndex === 1">
        <div id="wrapper" style="padding: 0;" class="top-canvas" ref="wrapper">
          <div id="onePipe"></div>
        </div>
        <div class="bottom-table">
          <div class="table-b">
            <ul class="table-b-list">
              <li v-for="(item, index) in tableOneCol" :key="index">{{item}}</li>
            </ul>
            <ul class="table-b-list" v-for="(item, index) in tableOtherCol" :key="index">
              <li v-for="(subItem, subIndex) in item.data" :key="subIndex">{{subItem.value}}
                <span>{{subItem.unit}}</span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="use-gas" v-show="activeIndex === 2">
        <div id="alpie" class="top-canvas" ref="wrapper">
          <div id="all-pipe"></div>
        </div>
        <div class="bottom-table">
          <div class="table-b">
            <ul class="table-b-list">
              <li v-for="(item, index) in tableWorkshop" :key="index">{{item}}</li>
            </ul>
            <ul class="table-b-list" v-for="(item, index) in tableWorkshopData" :key="index">
              <li v-for="(subItem, subIndex) in item.data" :key="subIndex">{{subItem.value}}
                <span>{{subItem.unit}}</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import lineTip from '../../../components/common/lineTip'
  import selectBtn from '../../../components/common/selectBtn'
  import {imgHash} from '@/util/imgFilter'
  import {FlowingSupport} from '../../../../static/qunee/flowPrototype'
  import MTabs from '../../../components/common/mTabs'

  export default {
    name: 'monitoring',
    props: {},
    data () {
      return {
        // 供气管网 确定 开关 只请求一次， 画一次 的 canvas 需要的 参数
        // end
        btncharacter: [],
        activeName: -1,
        activeIndex: 0,
        pipeText: {
          waterIn: '冷冻水出水',
          waterOut: '冷冻水回水'
        },
        pipeText1: {
          waterIn: '冷却水回水',
          waterOut: '冷却水出水'
        },
        list: [
          {key: '1', value: '气源系统'},
          {key: '2', value: '冷却系统'}
        ],
        projectName: { // 岁子组件的选择值改变而改变的值
          key: '1',
          value: '气源系统'
        },
        widthData: '100px',
        // end
        // 空压机房环境参数
        environmentTitle: '',
        environment: [],
        // 空压机房冷却参数
        coolingTitle: '',
        cooling: [],
        // 空压机房冷冻参数
        freezeTitle: '',
        freeze: [],
        // 供冷计量的表格数据 start
        tableOneCol: [],
        // canvas 绘图需要的 数组
        tableOtherColCanvas: [],
        // 默认的数据 数组
        tableOtherCol: [],
        // end
        // 总装车间的的表格数据 start
        tableWorkshop: [],
        // canvas 绘图需要的 数组
        tableWorkshopCanvas: [],
        // 默认的数据 数组
        tableWorkshopData: [],
        // end
        // 表格刷新定时器
        monTimer: null,
        // 制冷 qunee 实例对象
        graph: null,
        // 高宽比例
        quneeWidth: 84,
        quneeHeight: 96,
        // 制冷主机的 数组
        coolingData: [],
        // 冷却塔
        towerData: [],
        // 冷却泵
        pumpData: [],
        // 冷冻泵
        pumpDongData: [],
        // 车间
        workshopList: [],
        // 定时器刷新 各个设备运行状态
        timer: null,
        // 竖直 管道 几个高度的倍数
        heightPy: 0,
        // end
        // 供冷计量
        oneGraph: null,
        // 流动动画
        flowObj: null,
        oneWidth: 900,
        oneHeight: 265,
        // graph实例
        allPipe: null,
        allFlowObj: null,
        // 六边形大小
        sexangleWidth: 88,
        sexangleHeight: 100,
        // 设备数组
        devicesArr: [
          // {
          //   name: '1#螺杆机',
          //   status: 0
          // },
          // {
          //   name: '2#螺杆机',
          //   status: 2
          // },
          // {
          //   name: '3#离心机',
          //   status: 1
          // },
          {
            name: '4#离心机',
            pic: '1001',
            status: 0
          },
          {
            name: '5#离心机',
            pic: '1001',
            status: 2
          },
          {
            name: '6#离心机',
            pic: '1001',
            status: 2
          },
          {
            name: '1#螺杆机',
            pic: '1001',
            status: 0
          },
          {
            name: '2#螺杆机',
            pic: '1001',
            status: 2
          },
          {
            name: '3#离心机',
            pic: '1001',
            status: 1
          },
          {
            name: '4#离心机',
            pic: '1001',
            status: 0
          }
        ],
        // 总装车间 一次开关
        // 7月01日新需求的各个设备的ID 对象
        idObj: {},
        // 各个定时器
        // commonTime: null,
        coolingOneTime: null,
        coolingTatolTime: null,
        label2Timer: []
      }
    },

    created () {
      // this.monitorTimer(2000)
    },
    mounted () {
      // 公共数据的方法
      // this.commonTime = setTimeout(() => {
      //   this.commonGetData()
      // }, 500)
      this.commonGetData()
    },
    computed: {
      ...mapState('user', {
        facility: state => state.facility
      })
    },
    methods: {
      /*
      *  7 月 01 日 新需求更改
      * */
      // 获得 mTabs 分页的 方法
      _getTabs () {
        let params = {
          type: 100,
          spaceId: this.facility
        }
        return window.myapi.getTabs(params).then(res => {
          return res.data.data
        }).catch((e) => {
        })
      },
      // 获得 mTabs 分页的id 请求各个设备的 id 的方法
      _getTabsDevids (params) {
        return window.myapi.getTabsDevids(params).then(res => {
          return res.data.data
        }).catch((e) => {
        })
      },
      // 异步清空所有数据的方法
      allEmpty () {
        // 分页mTabs 的数据和 激活的清空
        this.btncharacter = []
        // 右侧三个表格的数据清空
        this.environment = []
        this.freeze = []
        this.cooling = []
        // 清空定时器
        clearTimeout(this.monTimer)
        clearTimeout(this.timer)
        clearTimeout(this.coolingTatolTime)
        clearTimeout(this.coolingOneTime)
        // 清空 qunee 实例
        if (this.graph) {
          this.graph.destroy()
          this.graph = null
        }
        if (this.allPipe) {
          // 结束总装车间的动态
          this.allPipe.destroy()
          this.allPipe = null
        }
        if (this.oneGraph) {
          // 结束供冷计量的动画动态
          this.oneGraph.destroy()
          this.oneGraph = null
        }
        this.activeName = -1
        this.activeIndex = 0
        // 供冷计量 和 总装车间的 开关
      },
      // 刷新数据的 方法
      refreshData () {
        this.commonGetData()
      },
      // 异步公共方法
      async commonGetData () {
        try {
          const btncharacter = await this._getTabs().then(res => res)
          if (!btncharacter.length) {
            this.btncharacter = []
            this.activeName = -1
            this.$Notice.warning({
              title: '提示',
              desc: '站房无数据，请补充数据....'
            })
            return false
          } else {
            this.btncharacter = btncharacter
            this.activeName = btncharacter[0].value
          }
          let params = {
            spaceId: this.activeName
          }
          this.idObj = await this._getTabsDevids(params).then(res => res)
          if (this.idObj[0]) {
            // 初始化qunee 实例对象
            this.initGraph()
            // 制冷机房的异步获取数据
            this.asyncGetCoolingData(this.idObj[0])
            // 制冷机房的定时器 刷新数据
            this.timerFun(3000)
          }
          // 右侧 三个表格的数据
          // if (this.idObj[2]) {
          //   this.getCompressorList(this.idObj[2]).then(res => {
          //     this.environmentTitle = res.devName
          //     let data = res.data
          //     if (data.length < 6) {
          //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
          //       let obj = {unit: '', dataType: '', id: null, value: null}
          //       this.environment = data.concat(arr).fill(obj, data.length)
          //     } else {
          //       this.environment = data
          //     }
          //   })
          // }
          // if (this.idObj[3]) {
          //   this.getCompressorList(this.idObj[3]).then(res => {
          //     this.freezeTitle = res.devName
          //     let data = res.data
          //     if (data.length < 6) {
          //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
          //       let obj = {unit: '', dataType: '', id: null, value: null}
          //       this.freeze = data.concat(arr).fill(obj, data.length)
          //     } else {
          //       this.freeze = data
          //     }
          //   })
          // }
          // if (this.idObj[4]) {
          //   this.getCompressorList(this.idObj[4]).then(res => {
          //     this.coolingTitle = res.devName
          //     let data = res.data
          //     if (data.length < 6) {
          //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
          //       let obj = {unit: '', dataType: '', id: null, value: null}
          //       this.cooling = data.concat(arr).fill(obj, data.length)
          //     } else {
          //       this.cooling = data
          //     }
          //   })
          // }
          this.monitorTimer(2000)
        } catch (err) {
          console.error(err)
        }
      },
      // end
      /*
       6月17日 开始弄的 制冷系统>工艺监视>供冷计量---总装车间
      ***/
      initOnePipe () {
        if (this.oneGraph === null) {
          this.oneGraph = new Q.Graph('onePipe')
          // 禁止编辑图元
          this.oneGraph.editable = false
          this.oneGraph.enableInertia = false
          // this.oneGraph.enableRectangleSelectionByRightButton = false
          // this.oneGraph.enableTooltip = false
          // this.oneGraph.enableWheelZoom = false
          // 禁止双击放大
          this.oneGraph.enableDoubleClickToOverview = false
          // 进制拖拉图元
          // this.oneGraph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
          this.oneGraph.interactionMode = false
          this.oneGraph.originAtCenter = false
          this.oneGraph.moveToCenter()
          // 监听鼠标的坐标
          // this.oneGraph.onmousemove = evt => {
          //   var p = this.oneGraph.globalToLocal(evt)
          //   document.getElementById('cont').innerHTML = '坐标：x******' + p.x + ', y******' + p.y
          // }
          // this.oneGraph.onclick = evt => {
          //   if (evt.getData() instanceof Q.Node) {
          //     Q.log(evt)
          //     var p = this.oneGraph.globalToLocal(evt)
          //     Q.log(p.x, p.y)
          //     this.oneGraph.centerTo(p.x, p.y, 1)
          //   }
          //
          // }
          // this.oneGraph.ondblclick = evt => {
          //   var node = this.oneGraph.getElementByMouseEvent(evt)
          //   if (node === undefined) {
          //     // 点空白地方，移到画布中心显示
          //     this.oneGraph.moveToCenter()
          //   }
          // }
          // 添加动画
          this.flowObj = new FlowingSupport(this.oneGraph, 'arrow', 20)
        }
      },
      // 制冷系统的 文字
      onePipeName (name, x, y, flag) {
        let curNode = flag ? this.allPipe.createNode(name, x, y) : this.oneGraph.createNode(name, x, y)
        curNode.image = null
        curNode.setStyle(Q.Styles.LABEL_COLOR, '#4C90FD')
        curNode.setStyle(Q.Styles.LABEL_FONT_SIZE, 18)
      },
      // 三角形
      oneShape (name, x, y, rotate, flag) {
        let curNode = flag ? this.allPipe.createNode('', x, y) : this.oneGraph.createNode('', x, y)
        curNode.image = Q.Shapes.getAllShapes(12, 24)[name]
        curNode.rotate = Math.PI / rotate
        curNode.setStyle(Q.Styles.SHAPE_FILL_COLOR, '#4C90FD')
      },
      // 横的水平线
      oneHoLine (startX, startY, endX, endY, flag) {
        let a = flag ? this.allPipe.createNode('', startX, startY) : this.oneGraph.createNode('', startX, startY)
        a.image = null
        let b = flag ? this.allPipe.createNode('', endX, endY) : this.oneGraph.createNode('', endX, endY)
        b.image = null
        let edge = flag ? this.allPipe.createEdge(a, b) : this.oneGraph.createEdge(a, b)
        edge.zIndex = 5
        edge.setStyle(Q.Styles.EDGE_COLOR, '#4C90FD')
        edge.setStyle(Q.Styles.EDGE_WIDTH, 10)
        edge.setStyle(Q.Styles.ARROW_TO, false)
      },
      // 垂直的水平线
      oneVerLine (arr, startX, startY, endX, endY) {
        let a, b, edge
        for (let i = 0; i < arr; i++) {
          a = this.oneGraph.createNode('', startX + i * 166, startY)
          a.image = null
          if (arr === 10) {
            b = this.oneGraph.createNode('', endX + i * 166, endY + 9)
          } else {
            b = this.oneGraph.createNode('', endX + i * 166, endY)
          }
          b.image = null
          edge = this.oneGraph.createEdge(a, b)
          edge.setStyle(Q.Styles.EDGE_COLOR, '#4C90FD')
          edge.setStyle(Q.Styles.EDGE_WIDTH, 8)
          edge.setStyle(Q.Styles.ARROW_TO, false)
          this.oneMachinePipe('blueTop', (startX + i * 166 + 10), -(this.oneHeight - 180), 40, 1)
          this.oneMachinePipe('blueMiddle', (startX + i * 166 + 13), -(this.oneHeight - 230), 40, 1)
          this.oneMachinePipe('blueBottom', (startX + i * 166 + 18), (this.oneHeight - 240), 30, 1)
          this.oneMachinePipe('blueBottom', (startX + i * 166 + 18), (this.oneHeight - 180), 30, 1)
        }
      },
      // 垂直的水平线的设备
      oneMachinePipe (color, x, y, height, rotate) {
        let curNode = this.oneGraph.createNode('', x, y)
        curNode.image = color
        curNode.zIndex = 3
        curNode.rotate = (Math.PI / rotate) * 1 / 2
        curNode.size = {height: height}
      },
      // end
      // 标签页的 切换事件
      toggleComponent (name, index) {
        if (this.activeName === name) return false
        this.activeIndex = index
        this.activeName = name
        if (this.activeIndex === 0) {
          if (this.allPipe) {
            // 结束总装车间的动态
            this.allFlowObj.stop()
            this.allPipe.destroy()
            this.allPipe = null
          }
          if (this.oneGraph) {
            // 结束供冷计量的动画动态
            this.flowObj.stop()
            this.oneGraph.destroy()
            this.oneGraph = null
          }
          // 清除定时器
          clearTimeout(this.monTimer)
          clearTimeout(this.timer)
          clearTimeout(this.coolingTatolTime)
          clearTimeout(this.coolingOneTime)
          // 初始化qunee 实例对象
          this.initGraph()
          // 制冷机房的异步获取数据
          this.asyncGetCoolingData(this.idObj[0])
          // 右侧 三个表格的数据
          // if (this.idObj[2]) {
          //   this.getCompressorList(this.idObj[2]).then(res => {
          //     this.environmentTitle = res.devName
          //     let data = res.data
          //     if (data.length < 6) {
          //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
          //       let obj = {unit: '', dataType: '', id: null, value: null}
          //       this.environment = data.concat(arr).fill(obj, data.length)
          //     } else {
          //       this.environment = data
          //     }
          //   })
          // }
          // if (this.idObj[3]) {
          //   this.getCompressorList(this.idObj[3]).then(res => {
          //     this.freezeTitle = res.devName
          //     let data = res.data
          //     if (data.length < 6) {
          //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
          //       let obj = {unit: '', dataType: '', id: null, value: null}
          //       this.freeze = data.concat(arr).fill(obj, data.length)
          //     } else {
          //       this.freeze = data
          //     }
          //   })
          // }
          // if (this.idObj[4]) {
          //   this.getCompressorList(this.idObj[4]).then(res => {
          //     this.coolingTitle = res.devName
          //     let data = res.data
          //     if (data.length < 6) {
          //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
          //       let obj = {unit: '', dataType: '', id: null, value: null}
          //       this.cooling = data.concat(arr).fill(obj, data.length)
          //     } else {
          //       this.cooling = data
          //     }
          //   })
          // }
          // 制冷机房的异步获取数据定时刷新
          this.monitorTimer(2000)
          this.timerFun(3000)
        }
        if (this.activeIndex === 1) {
          if (this.allPipe) {
            // 结束总装车间的动态
            this.allFlowObj.stop()
            this.allPipe.destroy()
            this.allPipe = null
          }
          if (this.graph) {
            this.graph.destroy()
            this.graph = null
          }
          // 清除定时器
          clearTimeout(this.monTimer)
          clearTimeout(this.timer)
          clearTimeout(this.coolingTatolTime)
          clearTimeout(this.coolingOneTime)
          this.label2Timer.forEach(item => window.clearInterval(item))
          // this.$nextTick(() => {
          // 实例化 qunee 对象
          this.initOnePipe()
          // 异步 绘图 canvas 需要 根据 获取 数据的  length 个数决定 this.facility
          this.asyncGasTableData({
            spaceId: this.activeName
          })
          // })
          // 添加流动线
          // this.oneGraph.forEach(item => {
          //   if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
          //     // console.log('item.get', item.get('color'))
          //     // 添加流动的效果
          //     this.flowObj.addFlowing(item, 3, true, '#fff')
          //   }
          // })
          // // 执行动态
          // this.flowObj.start()
          this.monitorTimer(2000)
        }
        if (this.activeIndex === 2) {
          if (this.oneGraph) {
            // 结束供冷计量的动画动态
            this.flowObj.stop()
            this.oneGraph.destroy()
            this.oneGraph = null
          }
          if (this.graph) {
            this.graph.destroy()
            this.graph = null
          }
          // 清除定时器
          clearTimeout(this.monTimer)
          clearTimeout(this.timer)
          clearTimeout(this.coolingTatolTime)
          clearTimeout(this.coolingOneTime)
          this.label2Timer.forEach(item => window.clearInterval(item))
          // this.$nextTick(() => {
          this.initAllPipe()
          // 异步 绘图 canvas 需要 根据 获取 数据的  length 个数决定
          this.asyncGasTableDataTotal({
            spaceId: this.activeName
          })
          // })
          // 添加流动线
          // this.allPipe.forEach(item => {
          //   if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
          //     // console.log('item.get', item.get('color'))
          //     // 添加流动的效果
          //     this.allFlowObj.addFlowing(item, 3, true, '#fff')
          //   }
          //   if (item.get('obj')) {
          //     if (item.get('obj').status === 1) {
          //       if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
          //         // console.log('item.get', item.get('color'))
          //         // 添加流动的效果
          //         this.allFlowObj.addFlowing(item, 3, true, '#fff')
          //       }
          //     } else {
          //       this.allFlowObj.removeFlowing(item.id)
          //     }
          //   }
          // })
          // 执行动态
          // this.allFlowObj.start()
          this.monitorTimer(2000)
        }
        if (this.activeIndex === 3) {
          // 清除定时器
          clearTimeout(this.monTimer)
          clearTimeout(this.timer)
          clearTimeout(this.coolingTatolTime)
          clearTimeout(this.coolingOneTime)
          this.label2Timer.forEach(item => window.clearInterval(item))
        }
      },
      monitorTimer (s) {
        let count = 0
        const time = () => {
          this.monTimer = setTimeout(() => {
            count += 3
            if (count > 30) {
              clearTimeout(this.monTimer)
              count = 0
            }
            if (this.activeIndex === 0) {
              // 右侧 三个表格的数据
              // if (this.idObj[2]) {
              //   this.getCompressorList(this.idObj[2]).then(res => {
              //     this.environmentTitle = res.devName
              //     let data = res.data
              //     if (data.length < 6) {
              //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
              //       let obj = {unit: '', dataType: '', id: null, value: null}
              //       this.environment = data.concat(arr).fill(obj, data.length)
              //     } else {
              //       this.environment = data
              //     }
              //   })
              // }
              // if (this.idObj[3]) {
              //   this.getCompressorList(this.idObj[3]).then(res => {
              //     this.freezeTitle = res.devName
              //     let data = res.data
              //     if (data.length < 6) {
              //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
              //       let obj = {unit: '', dataType: '', id: null, value: null}
              //       this.freeze = data.concat(arr).fill(obj, data.length)
              //     } else {
              //       this.freeze = data
              //     }
              //   })
              // }
              // if (this.idObj[4]) {
              //   this.getCompressorList(this.idObj[4]).then(res => {
              //     this.coolingTitle = res.devName
              //     let data = res.data
              //     if (data.length < 6) {
              //       let arr = Array.from(Array(6 - data.length), (v, k) => k)
              //       let obj = {unit: '', dataType: '', id: null, value: null}
              //       this.cooling = data.concat(arr).fill(obj, data.length)
              //     } else {
              //       this.cooling = data
              //     }
              //   })
              // }
            } else if (this.activeIndex === 1) {
              this.refreshGasTable()
            } else {
              this.refreshWorkshop()
            }
            time()
          }, s)
        }
        time()
      },
      // 刷新总装车间的表格数据
      refreshWorkshop () {
        let tableIdArr = this.tableWorkshopCanvas.map(item => item.devId)
        for (let i = 0; i < tableIdArr.length; i++) {
          (() => {
            this.coolingTatolTime = setTimeout(() => {
              window.myapi.postTimer({id: tableIdArr[i]}).then(res => {
                if (res.data.status === 200) {
                  this.tableWorkshopData = this.tableWorkshopData.map(item => {
                    if (item.devId === res.data.data.devId) {
                      item = {
                        ...item,
                        ...res.data.data,
                        ...res.data.data.data.unshift({
                          unit: '',
                          dataType: '',
                          value: item.devName
                        })
                      }
                    }
                    return item
                  })
                }
              }).catch((e) => {
              })
            }, 1000 * i)
          })()
        }
      },
      // 刷新供冷计量的表格数据
      refreshGasTable () {
        let tableIdArr = this.tableOtherColCanvas.map(item => item.devId)
        for (let i = 0; i < tableIdArr.length; i++) {
          (() => {
            this.coolingOneTime = setTimeout(() => {
              window.myapi.postTimer({id: tableIdArr[i]}).then(res => {
                if (res.data.status === 200) {
                  this.tableOtherCol = this.tableOtherCol.map(item => {
                    if (item.devId === res.data.data.devId) {
                      item = {
                        ...item,
                        ...res.data.data,
                        ...res.data.data.data.unshift({
                          unit: '',
                          dataType: '',
                          value: item.devName
                        })
                      }
                    }
                    return item
                  })
                }
              }).catch((e) => {
              })
            }, 1000 * i)
          })()
        }
      },
      // 空压机房右侧表数据数据
      getCompressorList (id) {
        return new Promise((resolve, reject) => {
          new window.Api({
            ...{id: id}
          }, 'POST').getComporData().then(res => {
            if (res.data.status === 200) {
              resolve(res.data.data)
            }
          }).catch(function (e) {
          })
        })
      },
      // 供冷计量的 异步请求数据
      async asyncGasTableData (data) {
        await this.getGasTableData(data).then(res => {
          if (res.status !== 200) {
            this.$Message.warning(res.msg)
            return
          }
          let tableOneCol = null
          if (res.cols.length > 0) {
            tableOneCol = res.cols
            tableOneCol.unshift('用冷对象')
            this.tableOneCol = tableOneCol
          }
          if (res.values.length < 10) {
            this.tableOtherColCanvas = res.values.map(item => {
              item.data.unshift({unit: '', dataType: '', value: item.devName})
              let obj = {...item}
              return obj
            })
            let arr = Array.from(Array(10 - this.tableOtherColCanvas.length), (v, k) => k)
            let dataObj = {
              devId: '',
              devName: '',
              data: [{unit: '', dataType: '', value: ''}, {unit: '', dataType: '', value: ''}, {
                unit: '',
                dataType: '',
                value: ''
              }, {
                unit: '',
                dataType: '',
                value: ''
              }, {unit: '', dataType: '', value: ''}, {unit: '', dataType: '', value: ''}],
              ctrlProcess: []
            }
            this.tableOtherCol = this.tableOtherColCanvas.concat(arr).fill(dataObj, this.tableOtherColCanvas.length)
          } else {
            this.tableOtherColCanvas = res.values.map(item => {
              item.data.unshift({unit: '', dataType: '', value: item.devName})
              let obj = {...item}
              return obj
            })
            this.tableOtherCol = [...this.tableOtherColCanvas]
          }
        })
        // 文字以及三角形
        this.onePipeName('我站', -(this.oneWidth - 48), this.oneHeight - 40)
        this.oneShape('triangle', -(this.oneWidth - 80), -(this.oneHeight - 40), 0)
        this.onePipeName('冷站', -(this.oneWidth - 48), -(this.oneHeight - 40))
        this.oneShape('triangle', -(this.oneWidth - 80), this.oneHeight - 40, 1)
        // 横的水平线
        this.oneHoLine(-(this.oneWidth - 100), -(this.oneHeight - 40), (this.oneWidth - 82), -(this.oneHeight - 40))
        this.oneHoLine((this.oneWidth - 88), (this.oneHeight - 40), -(this.oneWidth - 100), (this.oneHeight - 40))
        // 垂直的水平线
        this.oneVerLine(this.tableOtherColCanvas.length, -(this.oneWidth - 220), -(this.oneHeight - 44), -(this.oneWidth - 220), (this.oneHeight - 45))
        // 添加流动线
        this.oneGraph.forEach(item => {
          if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
            // console.log('item.get', item.get('color'))
            // 添加流动的效果
            this.flowObj.addFlowing(item, 3, true, '#fff')
          }
        })
        // 执行动态
        this.flowObj.start()
      },
      // 总装车间 里的 下面 表格的数据
      async asyncGasTableDataTotal (data) {
        await this.getGasTableData(data).then(res => {
          if (res.status !== 200) {
            this.$Message.warning(res.msg)
            return
          }
          let tableWorkshop = null
          if (res.cols.length > 0) {
            tableWorkshop = res.cols
            tableWorkshop.unshift('用冷对象')
            this.tableWorkshop = tableWorkshop
          }
          if (res.values.length < 10) {
            this.tableWorkshopCanvas = res.values.map(item => {
              item.data.unshift({unit: '', dataType: '', value: item.devName})
              let obj = {...item}
              return obj
            })
            let arr = Array.from(Array(10 - this.tableWorkshopCanvas.length), (v, k) => k)
            let dataObj = {
              devId: '',
              devName: '',
              data: [{unit: '', dataType: '', value: ''}, {unit: '', dataType: '', value: ''}, {
                unit: '',
                dataType: '',
                value: ''
              }, {
                unit: '',
                dataType: '',
                value: ''
              }, {unit: '', dataType: '', value: ''}, {unit: '', dataType: '', value: ''}],
              ctrlProcess: []
            }
            this.tableWorkshopData = this.tableWorkshopCanvas.concat(arr).fill(dataObj, this.tableWorkshopCanvas.length)
          } else {
            this.tableWorkshopCanvas = res.values.map(item => {
              item.data.unshift({unit: '', dataType: '', value: item.devName})
              let obj = {...item}
              return obj
            })
            this.tableWorkshopData = [...this.tableWorkshopCanvas]
          }
        })
        this.canvasGraph()
      },
      // 用气管网下表格数据
      getGasTableData (data = {}) {
        return window.myapi.getCoolingOrAir(data).then(res => {
          if (res.data.status === 200) {
            return res.data.data
          }
        })
      },
      // 获取制冷机房的数据
      getCoolingData (id) {
        return new Promise((resolve, reject) => {
          new window.Api(
            {
              ...{id: id, spaceId: this.facility}
            }, 'POST').getData().then(function (res) {
            console.log('hello world', res)
            if (res.data.status === 200) {
              resolve(res.data.jsData)
            }
          }).catch(function (e) {
            console.log(e)
          })
        })
      },
      // 解决异步问题
      async asyncGetCoolingData (id) {
        await this.getCoolingData(id).then(res => {
          if (res) {
            this.coolingData = res.devices['制冷主机'].hosts
            this.towerData = res.devices['冷却塔'].hosts
            this.pumpData = res.devices['冷却泵'].hosts
            this.pumpDongData = res.devices['冷冻泵'].hosts
            this.workshopList = res.devices['用能车间'].hosts
          }
        })
        if (this.coolingData.length === 0 && this.towerData.length === 0 && this.pumpData.length === 0 && this.pumpDongData.length === 0) {
          this.$Message.warning('未配置数据')
          return
        }
        // 制冷主机的个数
        this.isTwoMultiple(this.coolingData)
        // 冷却塔设备组的个数
        this.machineList(this.towerData, 230, -190, 50, 6, 'blueVertical', 'purpleVertical', 'blueArrow', 'purpleArrow')
        // 冷却泵设备组的个数
        this.machineList(this.pumpData, 230, 190, 50, 6, 'purpleVertical', 'purpleVertical', 'purpleArrow', 'purpleArrow')
        // 冷冻泵设备组的个数
        this.machineList(this.pumpDongData, -230, 190, 50, 6, 'cyanVertical', 'cyanVertical', 'cyanArrow', 'cyanArrow')
        // 各个 车间
        this.machineList(this.workshopList, -230, -190, 50, 6, 'dblueVertical', 'cyanVertical', 'dblueArrow', 'cyanArrow', true)
        // 公共设备的 以及车间 的别名 函数
        this.machineName('用能侧', -234, -310)
        this.machineName('冷却塔', 234, -310)
        this.machineName('冷冻泵', -234, 310)
        this.machineName('冷却泵', 234, 310)
        // 四个 颜色的 竖直管道的方法------- y 轴 会随着 (制冷主机的个数、管道的高度) 变化而变化, (286 / 2 + 7) --> 管道的高度的一半为 y 轴的坐标, 加上 7 是 制冷主机的中心; ***286*** 是 竖直管道的初始 高度
        this.verticalPipe('purpleVertical', (this.quneeWidth / 2 + 94), ((286 / 2 + 8) - this.heightPy * 96 / 2), (290 + this.heightPy * 96))
        this.verticalPipe('cyanVertical', (-this.quneeWidth / 2 - 94), ((286 / 2 + 8) - this.heightPy * 96 / 2), (290 + this.heightPy * 96))
        // 为1 就是 奇数要执行的逻辑, 否则 就是偶数
        this.verticalPipe('blueVertical', (this.quneeWidth / 2 + 48), (-(286 / 2 + 7) + (this.coolingData.length % 2 ? this.heightPy : (this.heightPy - 1)) * 96 / 2), (288 + (this.coolingData.length % 2 ? this.heightPy : (this.heightPy - 1)) * 96))
        this.verticalPipe('dblueVertical', (-this.quneeWidth / 2 - 48), (-(286 / 2 + 7) + (this.coolingData.length % 2 ? this.heightPy : (this.heightPy - 1)) * 96 / 2), (288 + (this.coolingData.length % 2 ? this.heightPy : (this.heightPy - 1)) * 96))
        // 温度计的方法
        // 四个 颜色的 水平管道的方法-------- x 轴 会随着 (一排排设备或者车间的个数、管道的宽度) 变化而变化
        this.horizontalPipe('purpleHorizontal', ((this.quneeWidth / 2 + 142) + (this.pumpData.length - 1) * 46), 294, (100 + (this.pumpData.length - 1) * 92))
        this.horizontalPipe('cyanHorizontal', (-(this.quneeWidth / 2 + 142) - (this.pumpDongData.length - 1) * 46), 294, (100 + (this.pumpDongData.length - 1) * 92))
        this.horizontalPipe('blueHorizontal', ((this.quneeWidth / 2 + 118) + (this.towerData.length - 1) * 46), -292, (146 + (this.towerData.length - 1) * 92))
        this.horizontalPipe('dblueHorizontal', (-(this.quneeWidth / 2 + 118) - (this.workshopList.length - 1) * 46), -292, (146 + (this.workshopList.length - 1) * 92))
        // 一排排设备的名称 中间的 横管道
        this.horizontalPipe('purpleHorizontal', ((this.quneeWidth / 2 + 190) + (this.pumpData.length - 1) * 46), this.quneeHeight / 2, (-2 + (this.pumpData.length - 1) * 92))
        this.horizontalPipe('cyanHorizontal', (-(this.quneeWidth / 2 + 190) - (this.pumpDongData.length - 1) * 46), this.quneeHeight / 2, (-2 + (this.pumpDongData.length - 1) * 92))
        this.horizontalPipe('purpleHorizontal', ((this.quneeWidth / 2 + 190) + (this.towerData.length - 1) * 46), -this.quneeHeight / 2, (-2 + (this.towerData.length - 1) * 92))
        this.horizontalPipe('cyanHorizontal', (-(this.quneeWidth / 2 + 190) - (this.workshopList.length - 1) * 46), -this.quneeHeight / 2, (-2 + (this.workshopList.length - 1) * 92))
        // 一排排设备 中间的 , 左右俩边 的竖直管道(青色和紫色)
        this.verticalPipe('purpleVertical', (this.quneeWidth / 2 + 194), 0, 96)
        this.verticalPipe('cyanVertical', -(this.quneeWidth / 2 + 194), 0, 96)
        // 一排排设备 中间的 , 左右俩边 的竖直管道(青色和紫色) 对应的 温度计和流量计 设备
        // 7月05日新需求 , 各个温度计表 实时刷新
        // 左上1
        if (this.idObj[2]) {
          this.thermometerCom(this.idObj[2], 'thermometerRight1', 1, (-this.quneeWidth / 2 - 92), -304, true)
        }
        // 右上1
        if (this.idObj[3]) {
          this.thermometerCom(this.idObj[3], 'thermometer1', 1, (this.quneeWidth / 2 + 92), -304, true)
        }
        // 左中2
        if (this.idObj[4]) {
          this.thermometerCom(this.idObj[4], 'meter1', -2, -242.5, 0)
        }
        // 右中2
        if (this.idObj[5]) {
          this.thermometerCom(this.idObj[5], 'thermometerRight1', 2, 248, 0)
        }
        // 左下3
        if (this.idObj[6]) {
          this.thermometerCom(this.idObj[6], 'thermometer1', 1, (-this.quneeWidth / 2 - 120), 306)
        }
        // 右下3
        if (this.idObj[7]) {
          this.thermometerCom(this.idObj[7], 'thermometerRight1', 1, (this.quneeWidth / 2 + 120), 306)
        }
        this.graph.forEach(item => {
          if (item.get('meterId')) {
            let label2 = new Q.LabelUI()
            // label2.position = Q.Position.CENTER_TOP
            // label2.alignPosition = Q.Position.LEFT_TOP // 文字对齐
            // label2.anchorPosition = Q.Position.CENTER_BOTTOM
            if (this.idObj[2] === item.get('meterId')) {
              label2.position = Q.Position.CENTER_BOTTOM
              label2.alignPosition = Q.Position.LEFT_BOTTOM // 文字对齐
              label2.anchorPosition = Q.Position.CENTER_BOTTOM
              label2.zIndex = 6
              label2.offsetY = 60
              label2.offsetX = -30
            }
            if (this.idObj[3] === item.get('meterId')) {
              label2.position = Q.Position.CENTER_BOTTOM
              label2.alignPosition = Q.Position.LEFT_BOTTOM // 文字对齐
              label2.anchorPosition = Q.Position.CENTER_BOTTOM
              label2.zIndex = 6
              label2.offsetY = 60
              label2.offsetX = 30
            }
            if (this.idObj[4] === item.get('meterId')) {
              label2.position = Q.Position.CENTER_BOTTOM
              label2.alignPosition = Q.Position.LEFT_BOTTOM // 文字对齐
              label2.anchorPosition = Q.Position.CENTER_BOTTOM
              label2.rotate = Math.PI / 2
              label2.offsetY = -90
              label2.offsetX = -30
            }
            if (this.idObj[5] === item.get('meterId')) {
              label2.position = Q.Position.CENTER_BOTTOM
              label2.alignPosition = Q.Position.LEFT_BOTTOM // 文字对齐
              label2.anchorPosition = Q.Position.CENTER_BOTTOM
              label2.rotate = (Math.PI / -1) * 1 / 2
              label2.offsetY = -90
              label2.offsetX = 30
            }
            if (this.idObj[6] === item.get('meterId')) {
              label2.position = Q.Position.CENTER_BOTTOM
              label2.alignPosition = Q.Position.LEFT_BOTTOM // 文字对齐
              label2.anchorPosition = Q.Position.CENTER_BOTTOM
              label2.rotate = Math.PI / 1
              label2.offsetY = -50
              label2.offsetX = -90
            }
            if (this.idObj[7] === item.get('meterId')) {
              label2.position = Q.Position.CENTER_BOTTOM
              label2.alignPosition = Q.Position.LEFT_BOTTOM // 文字对齐
              label2.anchorPosition = Q.Position.CENTER_BOTTOM
              label2.rotate = Math.PI / 1
              label2.offsetY = -50
              label2.offsetX = 90
            }
            label2.border = 0
            label2.padding = new Q.Insets(2, 5)
            label2.showPointer = false // 是否显示箭头
            // label2.offsetY = -5
            // label2.offsetX = 0
            label2.backgroundColor = 'rgba(0,0,0,0)'
            label2.fontSize = 12
            label2.color = '#fff'
            label2.size = 110
            item.addUI(label2, [{
              property: 'label2',
              propertyType: Q.Consts.PROPERTY_TYPE_CLIENT,
              bindingProperty: 'data'
            }, {
              property: 'label2.color',
              propertyType: Q.Consts.PROPERTY_TYPE_CLIENT,
              bindingProperty: 'color'
            }])
            // 绑定实时显示属性
            item.set('label2', '')
            // item.set('label2', '我发的时间: 454M \n 对方是垃: 223 M')
            this.label2Timer.push(setInterval(() => {
              this.getCoolMeter(item)
            }, 2000 + Math.floor(Math.random() * 500)))
          }
        })
        // 点空白地方，移到画布中心显示
        // this.graph.moveToCenter()
        // 自动放大扩展到屏幕
        this.graph.zoomToOverview()
      },
      // 定时器封装函数
      timerFun (s) {
        let count = 0
        const time = () => {
          this.timer = setTimeout(() => {
            count += 3
            if (count > 30) {
              clearTimeout(this.timer)
              count = 0
            }
            this.getCoolData(this.idObj[0])
            time()
          }, s)
        }
        time()
      },
      // 7月05 新需求 的更新
      // qunee 实例 添加 六个 温度计的 实时数据 定时器轮询请求的接口
      getCoolMeter (item) {
        window.myapi.postTimer({id: item.get('meterId')}).then(res => {
          if (res.data.status === 200) {
            let data = res.data.data.data
            let str = ''
            if (data.length > 0) {
              for (let i = 0, len = data.length; i < len; i++) {
                str = str + data[i].alias + ':' + data[i].value + data[i].unit + '\n'
              }
            }
            // 字符串赋值到上面
            item.set('label2', str)
          }
        }).catch((e) => {
        })
      },
      // 定时器刷新得到 制冷机房的 实时数据
      async getCoolData (id) {
        let hash = {}
        let data = await window.myapi.postTimer({id: id}).then(res => {
          if (res.data.status === 200) {
            return res.data.data.data
          }
        }).catch((e) => {
        })
        data.forEach(item => {
          if (typeof item.value !== 'number' && isNaN(item.value)) {
            item.value = 2
          }
          hash[item.id] = item
        })
        for (let k in hash) {
          this.graph.forEach(item => {
            if (item.get('hashId') == k || item.get('sixId') == k) {
              let status = item.image.substring(item.image.length - 1)
              if (status === hash[k].value) {
                return false
              } else {
                item.image = item.image.replace(status, hash[k].value)
              }
            }
          })
        }
      },
      // 初始化 qunee 实例对象
      initGraph () {
        if (this.graph === null) {
          this.graph = new Q.Graph('quneeWrapper')
          // 禁止编辑图元
          this.graph.editable = false
          // this.graph.enableInertia = false
          // this.graph.enableRectangleSelectionByRightButton = false
          // this.graph.enableTooltip = false
          // this.graph.enableWheelZoom = false
          // 禁止双击放大
          this.graph.enableDoubleClickToOverview = false
          // 进制拖拉图元
          this.graph.interactionMode = Q.Consts.INTERACTION_MODE_VIEW
          // this.graph.interactionMode = false
          this.graph.originAtCenter = false
          this.graph.moveToCenter()
          // 自适应
          // this.graph.zoomToOverview()
          // 监听鼠标的坐标
          // this.graph.onmousemove = evt => {
          //   var p = this.graph.globalToLocal(evt)
          //   document.getElementById('cont').innerHTML = '坐标：x******' + p.x + ', y******' + p.y
          // }
          this.graph.onclick = evt => {
            // if (evt.getData() instanceof Q.Node) {
            //   Q.log(evt)
            //   var p = this.graph.globalToLocal(evt)
            //   Q.log(p.x, p.y)
            //   this.graph.centerTo(p.x, p.y, 1)
            // }
            var node = this.graph.getElementByMouseEvent(evt)
            if (node === undefined) {
              // 点空白地方，移到画布中心显示
              this.graph.moveToCenter()
            }
          }
          this.graph.isSelectable = function () {
            return false
          }
          // this.graph.ondblclick = evt => {
          //   var node = this.graph.getElementByMouseEvent(evt)
          //   if (node === undefined) {
          //     // 点空白地方，移到画布中心显示
          //     this.graph.moveToCenter()
          //   }
          // }
        }
      },
      // 公共设备的 以及车间 的别名 函数
      machineName (name, x, y) {
        let curNode = this.graph.createNode(name, x, y)
        curNode.image = null
        curNode.setStyle(Q.Styles.LABEL_COLOR, '#BECEFF')
        curNode.setStyle(Q.Styles.LABEL_FONT_SIZE, 18)
      },
      // 四个 颜色的 竖直管道的方法
      verticalPipe (color, x, y, height) {
        let curNode = this.graph.createNode('', x, y)
        curNode.image = color
        curNode.zIndex = 3
        curNode.size = {width: 4, height: height}
      },
      // 四个 颜色的 水平管道的方法
      horizontalPipe (color, x, y, widthSize) {
        let curNode = this.graph.createNode('', x > 0 ? x + 4 : x - 4, y)
        curNode.image = color
        curNode.zIndex = 3
        curNode.size = {width: widthSize, height: 4}
      },
      // 温度计的方法
      thermometerCom (id, color, rotate, x, y, flag) {
        let curNode = this.graph.createNode('', x, y)
        curNode.image = color
        curNode.zIndex = 4
        if (!flag) curNode.rotate = Math.PI / rotate
        curNode.size = {height: 20}
        curNode.set('meterId', id)
      },
      // 公共设备组的 函数, 参数 arr-接口返回的前端处理后的数组, x-x轴坐标,y-y轴坐标, heightSize-图片高度大小,dir-图元间的间隔,flag-是否是车间
      machineList (arr, x, y, heightSize, dir, color1 = 'blueVertical', color2 = 'purpleVertical', color3, color4, flag) {
        // 当前节点图元, # 的索引, sixEdge 六边形节点图元
        let curNode, sub, sixEdge, verticalPipeUp, verticalPipeDown, verticalPipeUpArrow, verticalPipeDownArrow
        for (let i = 0; i < arr.length; i++) {
          // 图元之间的 间距
          if (x > 0) {
            x += dir
          } else {
            x -= dir
          }
          // end
          // flag 为真 就显示车间
          if (flag) {
            curNode = this.graph.createNode(arr[i].name, x > 0 ? (x + this.quneeWidth * i) : (x - this.quneeWidth * i), y)
            curNode.image = null
          } else {
            sub = arr[i].name.indexOf('#')
            // 找到数组 name 前 到 # 的对象.name为节点图元
            curNode = this.graph.createNode(arr[i].name.substring(0, sub + 1), x > 0 ? (x + this.quneeWidth * i + 2 * i) : (x - this.quneeWidth * i - 2 * i), x > 0 && y < 0 ? (y + 6) : y)
            curNode.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP)
            curNode.setStyle(Q.Styles.LABEL_PADDING, -15)
            curNode.setStyle(Q.Styles.BACKGROUND_COLOR, null)
            curNode.setStyle(Q.Styles.PADDING, 10)
            curNode.set('hashId', arr[i].id)
            curNode.size = {height: heightSize}
            // 节点图片 通过imgHash 过滤 xxxx + 0/1/2
            curNode.image = imgHash[arr[i].pic] + arr[i].status
            // curNode.image = imgHash[arr[i].name.substring(sub + 1)] + arr[i].status
          }
          // 六边形
          sixEdge = this.graph.createNode('', x > 0 ? (x + this.quneeWidth * i + 2 * i) : (x - this.quneeWidth * i - 2 * i), y)
          if (flag) {
            sixEdge.image = 'sixEdge1'
          } else {
            sixEdge.image = 'sixEdge' + arr[i].status
          }
          sixEdge.set('sixId', arr[i].id)
          sixEdge.zIndex = 1
          sixEdge.size = {width: this.quneeWidth, height: this.quneeHeight}
          // curNode.addChild(sixEdge)
          // end
          // 竖直管道和箭头 start
          verticalPipeUp = this.graph.createNode('', x > 0 ? (x + this.quneeWidth * i + 2 * i) : (x - this.quneeWidth * i - 2 * i), y > 0 ? 94 : -266)
          verticalPipeUp.image = color1
          verticalPipeUp.zIndex = 1
          verticalPipeUp.size = {width: 4, height: y > 0 ? 96 : 56}
          // curNode.addChild(verticalPipeUp)
          verticalPipeUpArrow = this.graph.createNode('', x > 0 ? (x + this.quneeWidth * i + 2 * i) : (x - this.quneeWidth * i - 2 * i), y > 0 ? 98 : -246)
          verticalPipeUpArrow.image = color3
          verticalPipeUpArrow.zIndex = 4
          verticalPipeUpArrow.rotate = Math.PI / 1
          verticalPipeUpArrow.size = {width: 10, height: 16}
          // curNode.addChild(verticalPipeUpArrow)
          verticalPipeDown = this.graph.createNode('', x > 0 ? (x + this.quneeWidth * i + 2 * i) : (x - this.quneeWidth * i - 2 * i), y > 0 ? 262 : -94)
          verticalPipeDown.image = color2
          verticalPipeDown.zIndex = 1
          verticalPipeDown.size = {width: 4, height: y > 0 ? 48 : 96}
          // curNode.addChild(verticalPipeDown)
          verticalPipeDownArrow = this.graph.createNode('', x > 0 ? (x + this.quneeWidth * i + 2 * i) : (x - this.quneeWidth * i - 2 * i), y > 0 ? 288 : -58)
          verticalPipeDownArrow.image = color4
          verticalPipeDownArrow.zIndex = 4
          verticalPipeDownArrow.rotate = Math.PI / 1
          verticalPipeDownArrow.size = {width: 10, height: 16}
          // curNode.addChild(verticalPipeDownArrow)
          curNode.zIndex = 2
          curNode.setStyle(Q.Styles.LABEL_COLOR, '#BECEFF')
        }
      },
      // 制冷主机的个数 可能性
      isTwoMultiple (arr) {
        if (arr.length <= 0) {
          return
        }
        let curNode, sixEdge, blueHorizontal, purpleHorizontal, dblueHorizontal, cyanHorizontal, blueArrow, cyanArrow,
          dblueArrow, purpleArrow, purpleControl, cyanControl
        if (arr.length > 0) {
          for (let i = 0; i < arr.length; i++) {
            let sub = arr[i].name.indexOf('#')
            if (sub > -1) {
              // 第一个 永远 围绕 坐标 0, 0 来 画
              if (!i) {
                curNode = this.graph.createNode(arr[i].name.substring(0, sub + 1), 0, 0)
                // 六边形
                sixEdge = this.graph.createNode('', 0, this.quneeHeight * i)
                // 蓝色横管道
                blueHorizontal = this.graph.createNode('', this.quneeWidth / 2 + 24, -8 + this.quneeHeight * i)
                // 蓝色箭头
                blueArrow = this.graph.createNode('', this.quneeWidth / 2 + 40, -8 + this.quneeHeight * i)
                // 紫色横管道
                purpleHorizontal = this.graph.createNode('', this.quneeWidth / 2 + 47, 8 + this.quneeHeight * i)
                // 紫色箭头
                purpleArrow = this.graph.createNode('', this.quneeWidth / 2 + 10, 8 + this.quneeHeight * i)
                // 紫色孩子的控制阀设备
                purpleControl = this.graph.createNode('', this.quneeWidth + 30, 1 + this.quneeHeight * i)
                // 深蓝色横管道
                dblueHorizontal = this.graph.createNode('', -this.quneeWidth / 2 - 24, -8 + this.quneeHeight * i)
                // 深蓝色箭头
                dblueArrow = this.graph.createNode('', -this.quneeWidth / 2 - 40, -8 + this.quneeHeight * i)
                // 青色横管道
                cyanHorizontal = this.graph.createNode('', -this.quneeWidth / 2 - 47, 8 + this.quneeHeight * i)
                // 青色箭头
                cyanArrow = this.graph.createNode('', -this.quneeWidth / 2 - 10, 8 + this.quneeHeight * i)
                // 青色孩子的控制阀设备
                cyanControl = this.graph.createNode('', -this.quneeWidth - 30, 1 + this.quneeHeight * i)
              } else {
                // 索引 i 为 奇数时, 实际上 目标数组的个数是 偶数 的时候, 图元 y 轴 向上 减掉固定高度96
                if (i % 2) {
                  curNode = this.graph.createNode(arr[i].name.substring(0, sub + 1), 0, -this.quneeHeight * ((i + 1) / 2))
                  // 六边形
                  sixEdge = this.graph.createNode('', 0, -this.quneeHeight * ((i + 1) / 2))
                  // 蓝色横管道
                  blueHorizontal = this.graph.createNode('', this.quneeWidth / 2 + 24, -8 - this.quneeHeight * ((i + 1) / 2))
                  // 蓝色箭头
                  blueArrow = this.graph.createNode('', this.quneeWidth / 2 + 40, -8 - this.quneeHeight * ((i + 1) / 2))
                  // 紫色横管道
                  purpleHorizontal = this.graph.createNode('', this.quneeWidth / 2 + 47, 8 - this.quneeHeight * ((i + 1) / 2))
                  // 紫色箭头
                  purpleArrow = this.graph.createNode('', this.quneeWidth / 2 + 10, 8 - this.quneeHeight * ((i + 1) / 2))
                  // 紫色孩子的控制阀设备
                  purpleControl = this.graph.createNode('', this.quneeWidth + 30, 1 - this.quneeHeight * ((i + 1) / 2))
                  // 深蓝色横管道
                  dblueHorizontal = this.graph.createNode('', -this.quneeWidth / 2 - 24, -8 - this.quneeHeight * ((i + 1) / 2))
                  // 深蓝色箭头
                  dblueArrow = this.graph.createNode('', -this.quneeWidth / 2 - 40, -8 - this.quneeHeight * ((i + 1) / 2))
                  // 青色横管道
                  cyanHorizontal = this.graph.createNode('', -this.quneeWidth / 2 - 47, 8 - this.quneeHeight * ((i + 1) / 2))
                  // 青色箭头
                  cyanArrow = this.graph.createNode('', -this.quneeWidth / 2 - 10, 8 - this.quneeHeight * ((i + 1) / 2))
                  // 青色孩子的控制阀设备
                  cyanControl = this.graph.createNode('', -this.quneeWidth - 30, 1 - this.quneeHeight * ((i + 1) / 2))
                } else {
                  // 索引 i 为 偶数时, 实际上 目标数组的个数是 除了 1 的奇数 的时候, 图元 y 轴 向下 加上固定高度96
                  curNode = this.graph.createNode(arr[i].name.substring(0, sub + 1), 0, this.quneeHeight * parseInt((i + 1) / 2))
                  // 六边形
                  sixEdge = this.graph.createNode('', 0, this.quneeHeight * parseInt((i + 1) / 2))
                  // 蓝色横管道
                  blueHorizontal = this.graph.createNode('', this.quneeWidth / 2 + 24, -8 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 蓝色箭头
                  blueArrow = this.graph.createNode('', this.quneeWidth / 2 + 40, -8 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 紫色横管道
                  purpleHorizontal = this.graph.createNode('', this.quneeWidth / 2 + 47, 8 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 紫色箭头
                  purpleArrow = this.graph.createNode('', this.quneeWidth / 2 + 10, 8 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 紫色孩子的控制阀设备
                  purpleControl = this.graph.createNode('', this.quneeWidth + 30, 1 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 深蓝色横管道
                  dblueHorizontal = this.graph.createNode('', -this.quneeWidth / 2 - 24, -8 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 深蓝色箭头
                  dblueArrow = this.graph.createNode('', -this.quneeWidth / 2 - 40, -8 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 青色横管道
                  cyanHorizontal = this.graph.createNode('', -this.quneeWidth / 2 - 47, 8 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 青色箭头
                  cyanArrow = this.graph.createNode('', -this.quneeWidth / 2 - 10, 8 + this.quneeHeight * parseInt((i + 1) / 2))
                  // 青色孩子的控制阀设备
                  cyanControl = this.graph.createNode('', -this.quneeWidth - 30, 1 + this.quneeHeight * parseInt((i + 1) / 2))
                }
              }
            } else {
              return false
            }
            // 六边形
            // sixEdge = this.graph.createNode('', 0, this.quneeHeight * i)
            sixEdge.image = 'sixEdge' + arr[i].status
            sixEdge.zIndex = 1
            sixEdge.set('sixId', arr[i].id)
            sixEdge.size = {width: this.quneeWidth, height: this.quneeHeight}
            // curNode.addChild(sixEdge)
            // 蓝色横管道
            // blueHorizontal = this.graph.createNode('', this.quneeWidth / 2 + 24, -8 + this.quneeHeight * i)
            blueHorizontal.image = 'blueHorizontal'
            blueHorizontal.zIndex = 3
            blueHorizontal.size = {width: 48, height: 4}
            // blueHorizontal.rotate = Math.PI / 2
            // curNode.addChild(blueHorizontal)
            // 蓝色箭头
            // blueArrow = this.graph.createNode('', this.quneeWidth / 2 + 40, -8 + this.quneeHeight * i)
            blueArrow.image = 'blueArrow'
            blueArrow.zIndex = 4
            blueArrow.size = {width: 10, height: 20}
            blueArrow.rotate = Math.PI / 2
            // curNode.addChild(blueArrow)
            // end
            // 紫色横管道
            // purpleHorizontal = this.graph.createNode('', this.quneeWidth / 2 + 47, 8 + this.quneeHeight * i)
            purpleHorizontal.image = 'purpleHorizontal'
            purpleHorizontal.zIndex = 3
            purpleHorizontal.size = {width: 94, height: 4}
            // purpleHorizontal.rotate = Math.PI / 2
            // curNode.addChild(purpleHorizontal)
            // 紫色箭头
            // purpleArrow = this.graph.createNode('', this.quneeWidth / 2 + 10, 8 + this.quneeHeight * i)
            purpleArrow.image = 'purpleArrow'
            purpleArrow.zIndex = 4
            purpleArrow.size = {width: 10, height: 20}
            purpleArrow.rotate = -Math.PI / 2
            // curNode.addChild(purpleArrow)
            // 紫色孩子的控制阀设备
            // purpleControl = this.graph.createNode('', this.quneeWidth + 30, 1 + this.quneeHeight * i)
            purpleControl.image = imgHash['1010'] + arr[i].right.status
            purpleControl.set('hashId', arr[i].right.id)
            purpleControl.zIndex = 5
            purpleControl.size = {height: 26}
            // curNode.addChild(purpleControl)
            // end
            // 深蓝色横管道
            // dblueHorizontal = this.graph.createNode('', -this.quneeWidth / 2 - 24, -8 + this.quneeHeight * i)
            dblueHorizontal.image = 'dblueHorizontal'
            dblueHorizontal.zIndex = 3
            dblueHorizontal.size = {width: 48, height: 4}
            // dblueHorizontal.rotate = Math.PI / 2
            // curNode.addChild(dblueHorizontal)
            // 深蓝色箭头
            // dblueArrow = this.graph.createNode('', -this.quneeWidth / 2 - 40, -8 + this.quneeHeight * i)
            dblueArrow.image = 'dblueArrow'
            dblueArrow.zIndex = 4
            dblueArrow.size = {width: 10, height: 20}
            dblueArrow.rotate = -Math.PI / 2
            // curNode.addChild(dblueArrow)
            // end
            // 青色横管道
            // cyanHorizontal = this.graph.createNode('', -this.quneeWidth / 2 - 47, 8 + this.quneeHeight * i)
            cyanHorizontal.image = 'cyanHorizontal'
            cyanHorizontal.zIndex = 3
            cyanHorizontal.size = {width: 94, height: 4}
            // cyanHorizontal.rotate = Math.PI / 2
            // curNode.addChild(cyanHorizontal)
            // 青色箭头
            // cyanArrow = this.graph.createNode('', -this.quneeWidth / 2 - 10, 8 + this.quneeHeight * i)
            cyanArrow.image = 'cyanArrow'
            cyanArrow.zIndex = 4
            cyanArrow.size = {width: 10, height: 20}
            cyanArrow.rotate = Math.PI / 2
            // curNode.addChild(cyanArrow)
            // 青色孩子的控制阀设备
            // cyanControl = this.graph.createNode('', -this.quneeWidth - 30, 1 + this.quneeHeight * i)
            cyanControl.image = imgHash['1010'] + arr[i].left.status
            cyanControl.set('hashId', arr[i].left.id)
            cyanControl.zIndex = 5
            cyanControl.size = {height: 26}
            // curNode.addChild(cyanControl)
            // end
            // 制冷主机
            curNode.zIndex = 2
            curNode.setStyle(Q.Styles.LABEL_POSITION, Q.Position.CENTER_TOP)
            curNode.setStyle(Q.Styles.LABEL_PADDING, -15)
            curNode.set('hashId', arr[i].id)
            curNode.setStyle(Q.Styles.BACKGROUND_COLOR, null)
            curNode.setStyle(Q.Styles.PADDING, 10)
            // 设置图元大小，width，height，不设置其中一个，会自动等比缩放根据设置的属性
            curNode.size = {height: 50}
            curNode.image = imgHash[arr[i].pic] + arr[i].status
            // curNode.image = imgHash[arr[i].name.substring(sub + 1)] + arr[i].status
            curNode.setStyle(Q.Styles.LABEL_COLOR, '#BECEFF')
          }
          // 为1 就是 奇数要执行的逻辑, 否则 就是偶数
          if (arr.length % 2) {
            // 这里要知道是 2的 几倍 来乘以 固定高度
            this.heightPy = parseInt(arr.length / 2)
            // 制冷主机
            this.machineName('制冷主机', 0, (70 + this.heightPy * this.quneeHeight))
          } else {
            // 这里要知道是 2的 几倍 来乘以 固定高度
            this.heightPy = parseInt(arr.length / 2)
            // 制冷主机
            this.machineName('制冷主机', 0, (70 + (this.heightPy - 1) * this.quneeHeight))
          }
        }
      },
      // 初始化总装车间graph实例
      initAllPipe () {
        if (this.allPipe === null) {
          this.allPipe = new Q.Graph('all-pipe')
          // 禁止编辑图元
          this.allPipe.editable = false
          // 禁止双击放大
          this.allPipe.enableDoubleClickToOverview = false
          // 禁止拖拉图元
          this.allPipe.interactionMode = false
          this.allPipe.originAtCenter = false
          this.allPipe.enableInertia = false
          this.allPipe.moveToCenter()
          // this.allPipe.onclick = evt => {
          //   if (evt.getData() instanceof Q.Node) {
          //     // Q.log(evt)
          //     var p = this.allPipe.globalToLocal(evt)
          //     // Q.log(p.x, p.y)
          //     this.allPipe.centerTo(p.x, p.y, 1)
          //   }
          // }
          // this.allPipe.ondblclick = evt => {
          //   var node = this.allPipe.getElementByMouseEvent(evt)
          //   if (node === undefined) {
          //     // 点空白地方，移到画布中心显示
          //     this.allPipe.moveToCenter()
          //   }
          // }
          // 添加动画效果
          this.allFlowObj = new FlowingSupport(this.allPipe, 'arrow', 20)
        }
      },
      canvasGraph () {
        // 文字以及三角形
        this.onePipeName('供出', -(this.oneWidth - 48), this.oneHeight - 40, true)
        this.oneShape('triangle', -(this.oneWidth - 80), -(this.oneHeight - 40), 0, true)
        this.onePipeName('供入', -(this.oneWidth - 48), -(this.oneHeight - 40), true)
        this.oneShape('triangle', -(this.oneWidth - 80), this.oneHeight - 40, 1, true)
        // 横的水平线
        this.oneHoLine(-(this.oneWidth - 100), -(this.oneHeight - 40), (this.oneWidth - 82), -(this.oneHeight - 40), true)
        this.oneHoLine((this.oneWidth - 88), (this.oneHeight - 40), -(this.oneWidth - 100), (this.oneHeight - 40), true)
        // 垂直的 管道和 设备
        this.equipmentNode(this.devicesArr, -(this.oneWidth - 220), -(this.oneHeight - 44), -(this.oneWidth - 220), (this.oneHeight - 36), 36, -(this.oneWidth - 220))
        // 添加流动线
        this.allPipe.forEach(item => {
          if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
            // console.log('item.get', item.get('color'))
            // 添加流动的效果
            this.allFlowObj.addFlowing(item, 3, true, '#fff')
          }
          if (item.get('obj')) {
            if (item.get('obj').status === 1) {
              if (item instanceof Q.Edge || item instanceof Q.ShapeNode) {
                // 添加流动的效果
                this.allFlowObj.addFlowing(item, 3, true, '#fff')
              }
            } else {
              this.allFlowObj.removeFlowing(item.id)
            }
          }
        })
        // 执行动态
        this.allFlowObj.start()
      },
      // 定时器刷新得到 总装车间的 实时数据
     async totalTimer () {
        let hash = {}
        let data = await window.myapi.postTimer({id: this.idObj[0]}).then(res => {
          if (res.data.status === 200) {
            return res.data.data.data
          }
        }).catch((e) => {
        })
       data.forEach(item => {
         if (typeof item.value !== 'number' && isNaN(item.value)) {
           item.value = 2
         }
         hash[item.id] = item
       })
       for (let k in hash) {
         this.allPipe.forEach(item => {
           // 这是图片的
           if (item.get('img') == k) {
             let status = item.image.substring(item.image.length - 1)
             if (status == hash[k].value) {
               return false
             } else {
               item.image = item.image.replace(status, hash[k].value)
             }
           }
           if (item.get('obj')) {
             // 这是 动画 根据 设备颜色 是否 添加 删除的
             if (item.get('obj').id == k) {
               if (item.get('obj').status == hash[k].value) {
                 return false
               } else {
                 if (item.get('obj').status === 1) {
                   // 设备图片是 绿色 要被 替换掉 所以清除动画的 id
                   this.allFlowObj.removeFlowing(item.id)
                   item.get('obj').status = hash[k].value
                 }
                 if (item.get('obj').status !== 1 && hash[k].value === 1) {
                   // 设备图片是 非绿色 要被 替换掉成 绿色, 所以 添加动画的
                   this.allFlowObj.addFlowing(item, 3, true, '#fff')
                   item.get('obj').status = hash[k].value
                 }
               }
             }
           }
         })
       }
      },
      // 总装车间的垂直的水平线
      equipmentNode (arr, startX, startY, endX, endY, heightSize, x) {
        let curNode, index, sexangle, a, b, edge, dir
        dir = 166
        for (let i = 0; i < arr.length; i++) {
          a = this.allPipe.createNode('', startX + i * dir, startY)
          b = this.allPipe.createNode('', endX + i * dir, endY)
          a.image = null
          // b = this.allPipe.createNode('', endX + i * 166, endY)
          b.image = null
          edge = this.allPipe.createEdge(a, b)
          edge.set('obj', arr[i])
          edge.setStyle(Q.Styles.EDGE_COLOR, '#4C90FD')
          edge.setStyle(Q.Styles.EDGE_WIDTH, 8)
          edge.setStyle(Q.Styles.ARROW_TO, false)
          index = arr[i].name.indexOf('#')
          curNode = this.allPipe.createNode('', (x + dir * i), (startY + endY) / 2)
          curNode.image = imgHash[arr[i].pic] + arr[i].status
          // curNode.image = imgHash[arr[i].name.substring(index + 1)] + arr[i].status
          curNode.size = {height: heightSize}
          curNode.zIndex = 2
          // 六边形
          sexangle = this.allPipe.createNode('', x + dir * i, (startY + endY) / 2)
          sexangle.image = Q.Shapes.getAllShapes(this.sexangleHeight, this.sexangleWidth)['hexagon']
          sexangle.rotate = Math.PI / 2
          sexangle.zIndex = 1
          sexangle.setStyle(Q.Styles.SHAPE_FILL_COLOR, '#4C90FD')
        }
      }
    },
    destroyed () {
      clearTimeout(this.monTimer)
      clearTimeout(this.timer)
      // 7月01日以后新需求变更的 定时器
      // clearTimeout(this.commonTime)
      clearTimeout(this.coolingTatolTime)
      clearTimeout(this.coolingOneTime)
      // clearTimeout(this.label2Timer)
      this.label2Timer.forEach(item => window.clearInterval(item))
    },
    components: {MTabs, lineTip, selectBtn}
  }
</script>

<style lang='scss' scoped>
  #cooling-monitoring {
    @include monitoring;

    #main-l {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1500px;

      #quneeWrapper {
        width: 100%;
        height: 100%;
      }
    }

    #wrapper {
      #onePipe {
        width: 100%;
        height: 100%;
      }
    }

    #alpie {
      width: 100%;
      height: 530px;

      #all-pipe {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
